<template>
  <div style="width: 100%;height: 100%">
<!--    输入框-->
    <div class="start" v-show="inputDialog">
      <input type="text" v-model="searched" class="inputSearch" placeholder="请输入商品名称" @keydown.enter="startSearch">
    </div>
<!--    状态表-->
    <div class="meta" v-show="metaDialog">
      <process ref="processCom" :processData="process"></process>
    </div>
<!--    遮罩-->
    <div class="back" v-show="backFace">
      <img :src="bg_src"  style="filter: blur(20px);position: absolute;z-index: -10;">
    </div>
    <div class="main">
      <img :src="bg_src" class="bg">
<!--      头部-->
      <div class="header">
        <Head @search="search($event)" :info="searched"></Head>
      </div>
      <div class="content_one">
        <div class="type">
          <box :data="type.title">
            <div class="change"> <div :class="type.nu" @click="changeTypeNum">数量</div><div :class="type.sl" @click="changeTypeSales">销量</div></div>
            <squrt class="squrt" :prop="type.data"></squrt>
          </box>
        </div>
        <div class="goods_list">
          <box-none><goodslist :prop="goods_list.data"></goodslist></box-none>
        </div>
        <div class="goods_top">
          <box :data="goods_top.title">
            <goodstop :prop="goods_top.data"></goodstop>
          </box>
        </div>
      </div>
      <div class="content_two">
        <div class="prince">
          <box :data="prince.title">
            <div class="change"> <div :class="prince.nu" @click="changeNum">数量</div><div :class="prince.sl" @click="changeSales">销量</div></div>
            <prince :prop="prince"></prince>
          </box>
        </div>
        <div class="tag">
          <box :data="tag.title">
            <shandian :prop="tag"></shandian>
          </box>
        </div>
        <div class="self">
          <box :data="self.title">
            <selfinfo :prop="self"></selfinfo>
          </box>
        </div>
        <div class="shop_top">
          <box :data="shop_top.title">
            <rose :prop="shop_top" v-if="show"></rose>
          </box>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import bg from '@/assets/bg.png'
import Head from './components/header'
import box from './components/box'
import boxNone from './components/boxNone'
import { search } from '@/api/search'
import process from '@/components/process'
import rose from '@/components/rose'
import prince from '@/components/line'
import selfinfo from '@/components/selfinfo'
import squrt from '@/components/squrt'
import shandian from '@/components/shandian'
import goodslist from '@/components/goodslist'
import goodstop from '@/components/goodstop'
export default {
  name: 'index',
  components: {
    Head,
    box,
    boxNone,
    process,
    rose,
    prince,
    selfinfo,
    squrt,
    shandian,
    goodslist,
    goodstop
  },
  data () {
    return {
      inputDialog: true,//输入界面
      metaDialog: false,//进度界面
      backFace:true,
      show:false,
      bg_src: bg,//背景图地址
      page:0,
      meta: {},//状态对象
      process: {
        num:0.1,
        process: '0%',
        title:'正在搜索'
      },//进度信息
      base_url: 'ws://127.0.0.1:8888',//websocket接口基地之
      type: {//种类数据
        title: '种类销量分析',
        nu:'showed',
        sl:'default',
        data:{
          xAxis:[],
          data:[]
        },
        goods: {},
        sales:{},
      },
      goods_list: {//商品top100
      },
      goods_top: {//榜首商品
        title: '榜首商品',
        data: {
        }
      },
      prince: {
        title: '价格区间分析',
        data:[],
        goodsNum:[],
        sales:[],
        xAxis:[],
        nu:'showed',
        sl:'default'
      },
      tag: {
        title: '优惠标签统计',
        data:[]
      },
      self: {
        title: '自营商铺比重',
        self:{
          name:'京东自营店铺',
          value: 0
        },
        other:{
          name:'其他店铺',
          value:0
        }
      },
      shop_top: {
        title: '热销店铺',
        data:[]
      },
      searched:''//搜索信息
    }
  },
  methods: {
    /**
     * 搜索接口
     * @param e
     * @returns {Promise<void>}
     */
    async search (e) {
      this.open()
      const res = await search({
        search: e,
      })
    },
    /**
     * socket获取数据通用接口
     * @param e
     */
    getData (e) {
      const res = JSON.parse(e.data)
      switch (res.meta.code){
        case 201:
          this.page+=1
          this.process.title = res.meta.msg
          this.process.num = 0.5*this.page
          this.process.process =  (0.5*this.page)+ '%'
          break
        case 101:
          this.process.title = res.meta.msg
          this.process.num = 40
          this.process.process = 40+'%'
          break
        case 102:
          this.process.title = res.meta.msg
          this.process.num = 100
          this.process.process = 100 + '%'
          break
        case 202:
          this.process.title = res.meta.msg
          this.process.num = 90
          this.process.process = 90+'%'
          break
        case 301:
          this.process.title = res.meta.msg
          this.process.process = 100 +'%'
          this.process.num = 100
          this.close()
          break
        default:
          break
      }
    },
    close(){
      setTimeout(_=>{
        this.inputDialog =  false//输入界面
        this.metaDialog = false//进度界面
        this.backFace = false
        this.show = true
        this.process.title = '正在搜索'
        this.process.process = 0 +'%'
        this.process.num = 0
      },3000)

    },
    open(){
      this.inputDialog =  false//输入界面
      this.metaDialog = true//进度界面
      this.backFace = true
      this.show = true
    },
    /**
     * 绑定meta对象socket
     */
    getMeta () {
      this.meta = new WebSocket(this.base_url + '/meta')
      this.meta.onmessage = this.getData
    } , /**
     * 绑定商品种类socket
     */
    getType () {
      const link = new WebSocket(this.base_url + '/type_percentage')
      link.onmessage = this.getTypeData
    },
    getTypeData(e){
      let res = JSON.parse(e.data)
      this.type.data = res.goods
      this.type.goods = res.goods
      this.type.sales = res.sales
    },
    /**
     * 绑定商品top100列表
     */
    getGoodsList () {
      let link  = new WebSocket(this.base_url + '/goodsTop')
      link.onmessage = this.getGoodsTop
    },
    getGoodsTop(e){
      let res = JSON.parse(e.data)
      this.goods_list.data = res.data
      this.goods_top.data = res.data[0]
    },
    /**
     * 绑定价格区间socket
     */
    getPrince () {
      const link = new WebSocket(this.base_url + '/princeSales')
      link.onmessage = this.getPriceData
    },
    getPriceData(e){
      let res = JSON.parse(e.data)
      this.prince.goodsNum = res.series.goodsNum
      this.prince.sales = res.series.sales
      this.prince.xAxis = res.xAxis
      this.prince.data = res.series.goodsNum
    },
    /**
     * 绑定优惠标签socket
     */
    getTag () {
      let link = new WebSocket(this.base_url + '/tagSales')
      link.onmessage = this.getTagData
    },
    getTagData(e){
      let res = JSON.parse(e.data)
      this.tag.data = res.data
    },
    /**
     * 绑定自营商品socket
     */
    getSelf () {
      const link = new WebSocket(this.base_url + '/self_percentage')
      link.onmessage = this.getSelfData
    },
    getSelfData(e){
      let res = JSON.parse(e.data)
      let self =  res.data.self
      let summary =  res.data.summary
      this.self.self.value = Math.ceil((self/summary)*100)
    },
    /**
     * 绑定热销店铺socket
     */
    getShopTop () {
      let link = new WebSocket(this.base_url + '/shopTop')
      link.onmessage= this.getShopData
    },
    getShopData(e){
      let res = JSON.parse(e.data)
      this.shop_top.data = res.data
    },
    /**
     * 开始socket链接入口
     */
    initWebSocket () {
      this.getMeta()
      this.getType()
      this.getGoodsList()
      this.getPrince()
      this.getSelf()
      this.getShopTop()
      this.getTag()
    },
     startSearch(){
      this.inputDialog = false
      this.metaDialog = true
      this.search(this.searched)
    },
    changeNum(){
      this.prince.nu = 'showed'
      this.prince.sl = 'default'
      this.prince.data = this.prince.goodsNum
    },
    changeSales(){
      this.prince.nu = 'default'
      this.prince.sl = 'showed'
      this.prince.data = this.prince.sales
    },
    changeTypeNum(){
      this.type.nu = 'showed'
      this.type.sl = 'default'
      this.type.data = this.type.goods
    },
    changeTypeSales(){
      this.type.nu = 'default'
      this.type.sl = 'showed'
      this.type.data = this.type.sales
    }
  },
  mounted () {
    this.initWebSocket()

  },
}
</script>

<style scoped lang="scss">
//主洁面布局
.start{
  width: 500px;
  height: 200px;
  background-color: rgba(43, 13, 13, 0.2);
  position: absolute;
  z-index: 15;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  border: 1px solid #0a636d;
  display: flex;
  justify-content: center;
  align-items: center;
  .inputSearch{
    width: 80%;
    height: 80%;
    outline: none;
    background-color: transparent;
    border: none;
    color: white;
    font-size: 3rem;
    text-align: center;
  }
}
.meta{
  width: 500px;
  height: 200px;
  background-color: rgba(43, 13, 13, 0.3);
  position: absolute;
  z-index: 15;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  border: 1px solid #0a636d;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  animation: animation ease-in-out 7s infinite;
  @keyframes animation {
    0%{
      border: 1px solid #146d0a;
      border-radius: 20px;
    }
    50%{
      border: 1px solid #6b08c3;
      border-radius: 40px;
    }
    75%{
      border: 1px solid #0a636d;
      border-radius: 0px;
    }
    100%{
      border-radius: 20px;
      border: 1px solid #146d0a;
    }
  }
}
.back{
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  position: absolute;
  z-index: 10;
}
.main {
  //背景图
  .bg {
    position: absolute;
    z-index: -10;
    width: 100%;
    height: 100%;
  }
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  //表头
  .header {
    flex: 1;
  }

  //第一行三个布局列表
  .content_one {
    flex: 8;
    display: flex;
    box-sizing: border-box;
    transform: translateY(15px);
    //商品种类
    .type {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .squrt{
      position: relative;
    }
    .squrt::after{
      position: absolute;
      content:"";
      z-index: 10;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    //商品列表
    .goods_list {
      flex: 2;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    //商品第一名
    .goods_top {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  //第二行四个
  .content_two {
    box-sizing: border-box;
    flex: 8;
    display: flex;
    flex-direction: row;
    //价格区间
    .prince {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    //商品标签
    .tag {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    //自营商品占比
    .self {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    //热销店铺
    .shop_top {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .change{
    float: right;
    margin-right: 20px;
    transform: translateY(-20px);
    display: flex;
    flex-direction: row;

  }
  .showed{
    font-size: 20px;
    border: 7px solid transparent;
    color: #8bc7d0;
    line-height: 0;
    transition: all ease-in-out 0.1s;
    &:hover{
      text-decoration:underline;
      text-decoration-color: yellow;
      transform: scale(1.1);
    }
  }
  .default{
    border: 7px solid transparent;
    color:#0a636d;
    line-height: 0;
    transition: all ease-in-out 0.1s;
    &:hover{
      transform: scale(1.1);
      color: #8bc7d0;
      text-decoration:underline;
      text-decoration-color: yellow;
    }
  }
}
</style>
